<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Backbone的view示例.</title>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
		<script src="//cdn.bootcss.com/backbone.js/1.2.3/backbone-min.js"></script>
	</head>
	<body>
		<div id="search_con"> </div>
		<script type="text/template" id="search_template">
			<span><%=data%></span>
			<input type="" name="search_input" id="search_input" value="" />
			<input type="button" name="search_btn" id="searchbtn" value="Search" />
		</script>
		<script type="text/javascript">
			(function($) {
				var searchView = Backbone.View.extend({
					initialize: function() {
						this.addtemplate();
					},
					addtemplate: function(name) {
						var templates = _.template($("#search_template").html());
						$(this.el).html(templates({
							data: name
						}));
					},
					events: {
						'click input[type=button]': 'showvalue'
					},
					showvalue: function() {
						//alert($("#search_input").val())
						this.addtemplate($("#search_input").val());
					}
				});
				var searchobj = new searchView({
					el: $("#search_con")
				});
				//				searchobj.addtemplate();
			})(jQuery);
		</script>
	</body>

</html>